<template>
  <div>
    <div class="flex jc-sb bg-fff pr-20">
      <HeaderTitle :textObj="textObj"></HeaderTitle>
    </div>
    <!-- tab栏 -->
    <el-tabs class="mt-10" type="border-card" @tab-change="tabChange" v-model="activeName">
      <el-tab-pane name="all" label="所有设备"></el-tab-pane>
      <el-tab-pane name="LoRaWAN" label="LoRaWAN"></el-tab-pane>
      <el-tab-pane name="LoRaPP" label="LoRaPP"></el-tab-pane>
    </el-tabs>
    <!-- 表单 -->
    <div class="bg-fff p-20">
      <el-form :model="form" label-width="auto" style="max-width: 400px">
        <el-form-item label="EUI:">
          <el-input v-model="form.eui" />
        </el-form-item>
        <el-form-item label="在线状态：">
          <el-select v-model="form.online" placeholder="在线状态">
            <el-option label="全部" value="" />
            <el-option label="在线" value="true" />
            <el-option label="离线" value="false" />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 绑定时间 -->
      <div class="flex aic pb-15 bt-15">
        <span>绑定时间：</span>
        <el-date-picker
          class="mr-30"
          v-model="date1"
          type="date"
          placeholder="开始日期"
        >
        </el-date-picker>
        <span> 至 </span>
        <el-date-picker
          class="ml-30"
          v-model="date2"
          type="date"
          placeholder="结束日期"
        />
      </div>
      <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
      <el-button type="primary" :icon="Delete" @click="handleReset">删除条件</el-button>
      <el-button type="primary" :icon="Refresh">刷新</el-button>
      <span class="ml-20 f14">搜寻到了{{ total }}条结果</span>
    </div>
    <!-- 列表 -->
    <el-table class="mt-10" :data="tableData" stripe border>
      <el-table-column
        align="center"
        type="index"
        :index="indexMethod"
        label="序号"
        width="100"
      />
      <el-table-column align="center" prop="eui" label="eui码" width="180" />
      <el-table-column
        align="center"
        prop="name"
        label="设备名称"
        width="180"
      />
      <el-table-column
        align="center"
        prop="country"
        label="国家"
        width="200"
      />
      <el-table-column
        align="center"
        prop="agreement"
        label="协议类型"
        width="180"
      />
      <el-table-column
        align="center"
        prop="mhz"
        label="频率（MHz）"
        width="200"
      />
      <el-table-column
        align="center"
        prop="online"
        label="在线状态"
        width="180"
      />
      <el-table-column
        align="center"
        prop="bTime"
        label="绑定时间"
        width="250"
        :formatter="formatDate"
      />
      <el-table-column
        align="center"
        prop="uTime"
        label="更新时间"
        width="255"
        :formatter="formatDate"
      />
    </el-table>
    <!-- 页数 -->
    <div class="fcc bg-fff p-20">
      <el-pagination
        :hide-on-single-page="true"
        @current-change="onChange"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        :current-page="params.currPage"
      />
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import {
  $gatewayList,
  $gatewayDetail,
  $gatewayEdit,
  $deviceSensorList,
} from "../../api/index.js";
import { ref, onMounted } from "vue";
import HeaderTitle from "../../components/HeaderTitle.vue";
import { formatDate } from "../../utils/utils";
import {
  Edit,
  Delete,
  Search,
  ArrowDown,
  Refresh,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 设置 dayjs 语言为中文
dayjs.locale('zh-cn');

let textObj = {
  title: "设备 ",
  name: "网关",
  dsc: "  展示EUI、名称、状态等设备信息，可根据EUI、状态，和绑定时间等条件筛选具体的网关。",
};
const total = ref(5);
const date1 = ref("");
const date2 = ref("");
// 表单数据
const form = ref({
  eui: "",
  online: "",
});
// 搜索参数
const search = async () => {
  if (date1.value && date2.value) {
    let bTimeStart = new Date(date1.value).getTime();
    let bTimeEnd = new Date(date2.value).getTime();
    params.date = bTimeStart + "-" + bTimeEnd;
  }
  const data = {
    ...form.value,
    ...params,
  };
  let res = await $gatewayList(data);
  total.value = res.total;
  tableData.value = res.data;
  tableData.value.map((item) => {
    if (item.online) {
      item.online = "在线";
    } else {
      item.online = "离线";
    }
  });
};
// 表格数据
const tableData = ref([
  {
    id: "500000201910165525",
    eui: "2XB16420832",
    mhz: "CN553-401",
    online: false,
    country: "China",
    agreement: "LoRaPP",
    name: "土壤温湿度传感器",
    powerNum: 79,
    nums: "2",
    devGroup: "潍坊农业基地",
    loop: 3,
    bTime: 1634608495317,
    uTime: 1634608495317,
    devName: "土壤温湿度",
    devValue: "43%RH",
  },
]);
// 获取节点传感器表格数据
const params = {
  currPage: 1,
  pageSize: 5,
  agreement: "all",
  date: "",
};
const getList = async () => {
  let res = await $gatewayList(params);
  total.value = res.total;
  tableData.value = res.data;
  tableData.value.map((item) => {
    if (item.online) {
      item.online = "在线";
    } else {
      item.online = "离线";
    }
  });
};
// tab栏跳转渲染
let activeName = ref('all');
const tabChange = (name) => {
  params.currPage = 1;
  params.agreement = name;
  getList();
};
// 删除条件
const handleReset = () => {
  form.value = {
    eui: "",
    online: "",
  };
  date1.value = "";
  date2.value = "";
  params.date = "";
  params.currPage = 1;
  getList();
  
};
// 分页渲染
const onChange = (page) => {
  params.currPage = page;
  getList();
};
onMounted(() => {
  getList();
});
// 定义 indexMethod 函数
const indexMethod = (index) => {
  return index + 1;
};
</script>    